/**
  transition 多个元素或组件过度
 */

<template>
  <div>
    <div class="content-box">
      <button @click="onAdd">add</button>
      <transition-group>
        <div v-for="item in list" :key="item.id">{{item.text}}</div>
      </transition-group>
    </div>

    <h5>功能：transition-group，transition能用，这里都可以用</h5>
    <ol class="desc-box">
    </ol>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list:[]
    };
  },
  mounted(){
    // console.log(Velocity)
  },
  methods: {
    onAdd() {
      const count = this.list.length
      this.list.push({
        id: count,
        text:'第'+count+'列'
      })
    }
  }
};
</script>

<style>
.v-enter,.v-leave-to{
  opacity:0;
}
.v-enter-active,.v-leave-active{
  transition:opacity 1s;
}

</style>
